<template>
  <div class="main">
    <div class="left">
      <div class="top">
        <div class="left_top">
          <div class="item">
            <Access :deviceData="deviceData"></Access>
          </div>
          <div class="item">
            <Online :deviceData="deviceData"></Online>
          </div>
          <div class="item">
            <Abnormal :deviceData="deviceData"></Abnormal>
          </div>
        </div>
      </div>
      <div class="bottom item">
        <Map></Map>
      </div>
    </div>
    <div class="right">
      <div class="top item">
        <Modal :typeCount="typeCount" :typeData="typeData"></Modal>
      </div>
      <div class="bottom item">
        <ProjectStatis></ProjectStatis>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { ref } from 'vue';
import { getAllDevice, getDeviceType, getIsDevice } from '@/api/home';
import Abnormal from './components/abnormal.vue';
import Access from './components/access.vue';
import Map from './components/map.vue';
import Modal from './components/modal.vue';
import Online from './components/online.vue';
import Process from './components/process.vue';
import ProjectStatis from './components/projectStatis.vue';
import SeismicStatis from './components/seismicStatis.vue';
import Type from './components/type.vue';

const deviceData = ref({});
const typeData = ref([]);
const typeCount = ref(0);
const getDevice = async () => {
  const res = await getAllDevice();
  if (res.code == 200) {
    getIsDeviceFn(res.data);
  }
};

const getIsDeviceFn = async (data: any) => {
  const res: any = await getIsDevice();
  if (res.code == 200) {
    deviceData.value = Object.assign(data, res.data);
  }
};

getDevice();

const getDeviceTypeFn = async () => {
  const res: any = await getDeviceType();
  if (res.code == 200) {
    typeData.value = res.data;
    typeData.value.forEach((item: any) => {
      typeCount.value += item.modelCount;
    });
  }
};

getDeviceTypeFn();
</script>

<style lang="scss" scoped>
.item {
  background-color: transparent;
  border-radius: 1vh;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.main {
  width: 100%;
  height: 100%;
  display: flex;

  .left,
  .right {
    display: flex;
    flex-direction: column;
    .bottom {
      flex: 3.5;
    }
    .top {
      flex: 1;
      margin-bottom: 1.5vh;
    }
  }
  .left {
    .top {
      display: flex;
      flex-direction: column;
      & > div {
        &:last-child {
          flex: 1.5;
        }
      }
    }
  }
  .left {
    flex: 3.5;
    margin-right: 1.5vh;
  }
  .right {
    flex: 1;
    .top {
      flex: 4;
    }
  }
}
.left_top {
  display: flex;
  & > div {
    flex: 1;
    &:nth-child(2) {
      margin: 0 1.5vh;
    }
  }
}
</style>
